<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html" charset="utf-8"/>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>Title</title>
    <link rel="stylesheet" href="lib/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="lib/element-ui/index.css">
    <style>

        table.i-table {
            box-sizing: border-box;
            width: 400px;
            height: 150px;
            text-align: center;
            margin-top: 20px;
            margin-left: 20px;
            border-left: #eeeeee solid 1px;
            border-top: #eeeeee solid 1px;
            border-collapse: collapse;
            border-spacing: 0
        }

        table.i-table td {
            width: 20px;
            box-sizing: border-box;
            padding: 0;
            border-right: #eeeeee solid 1px;
            border-bottom: #eeeeee solid 1px;
        }

        table.i-table th {
            box-sizing: border-box;
            padding: 0;
            border-bottom: 1px solid #eeeeee;
            border-right: 1px solid #eeeeee;
        }

        .grant .bg {
            background: #eeeeee;
        }
        .el-table .cell, .el-table th > .cell {
            padding-left: 0;
            padding-right: 0;
            text-align: center;
        }

        .grant .mark {
            padding: 0 20px;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 10086;
        }
        .grant .mark .line{
            height: 300px;
            background: #00FF00;
            width: 3px;
        }
        .grant .mark.dragging {
        }
        .invisible{
            display: none;
        }
    </style>
</head>
<body style="padding: 66px;">
<div id="app" class="main-wrapper">
    <grant v-model="data"></grant>
</div>

<template class="grant-template">
    <div class="grant">

        <table class="i-table" v-if="false" border="1" cellpadding="0" cellspacing="0">
            <tr>
                <td rowspan="2">测试</td>
                <td :colspan="item.range.length" v-for="item in date">{{item.key}}</td>
            </tr>
            <tr>
                <template v-for="item in date">
                    <td width="20" v-for="d in item.range">
                        {{d.getDate()}}
                    </td>
                </template>
            </tr>
            <tr v-for="ad in data">
                <td> {{ad.title}}</td>
                <template v-for="item in date">
                    <td v-for="d in item.range">
                        <div v-if="inDate(ad, d)" class="mark">
                            {{d.getDate()}}
                        </div>
                    </td>
                </template>
            </tr>
        </table>
        <el-table :data="data" style="width: 100%">
            <el-table-column prop="title" label="姓名" width="180" fixed show-overflow-tooltip class-name="table-title"></el-table-column>
            <el-table-column :label="item.key" v-for="item in date" :key="item.key">
                <el-table-column width="32" :label="d.getDate() + ''" v-for="d in item.range" :key="+d">
                    <template slot-scope="scope">
                        <div v-if="inDate(scope.row, d)" class="bg">
                            {{d.getDate()}}
                        </div>
                    </template>
                </el-table-column>
            </el-table-column>
        </el-table>
        <div class="mark">
            <div class="line"></div>
            <div class="icon"></div>
        </div>
    </div>
</template>
<script src="js/common/global.js"></script>
<script src="js/common/cache.js"></script>
<script src="lib/vue.js"></script>
<script src="lib/qs.js"></script>
<script src="lib/axios.js"></script>
<script src="js/common/axios-plugin.js"></script>
<script src="lib/jquery-3.5.1.js"></script>
<script src="lib/element-ui/index.js"></script>
<script src="js/service/api-data.js"></script>
<script>
    //const citySelectUrl = '/Api/KeyValue/GetProvinceGroups';
    const grant = {
        template: $('.grant-template').html(),
        model: {
            prop: 'value',
            event: 'change'
        },
        props: {
            value: {
                type: Array,
                default: 0
            }
        },
        data() {
            return {
                data: [],
                date: {},
                minTime: '',
                maxTime: '',
            }
        },
        watch: {
            value(val) {
                this.data = val;
                this.calc()
            }
        },
        mounted() {
            this.init();
        },
        methods: {
            init() {
            },
            inDate(ad, date) {
                for (let i = 0; i < ad.schedules.length; i++) {
                    let sche = ad.schedules[i];
                    if (sche.upTime <= date && sche.expireTime >= date) {
                        return true;
                    }
                }
                return false;
            },
            renderMark(){
                let x, y, $mark = $('.mark');
                let height = $mark.innerHeight();
                let $lastEl = $('.table-title').eq(-1).next(), offset = $lastEl.offset();
                console.log(offset, height, $lastEl.innerHeight())
                let top = offset.top - height + $lastEl.innerHeight();
                $mark.css('top', top).css('left', offset.left)

                $mark.attr('draggable', true)
                // 默认情况下,数据/元素不能在其他元素中被拖放。对于drop我们必须防止元素的默认处理
                document.addEventListener("dragover", function(event) {
                    event.preventDefault();
                });
                $mark.off('dragstart');
                $mark.on('dragstart', function (e) {
                    console.log('dragstart', e)
                    $(this).addClass('dragging');
                    x = e.clientX;
                    y = e.clientY;
                    setTimeout(()=>{
                        $(this).addClass('invisible');
                    }, 0)
                })
                $mark.on('drag', function (e) {
                    e.preventDefault();
                })
                $mark.off('dragend');
                $mark.on('dragend', function (e) {
                    let $this =  $(this);
                    console.log('dragend', e)
                    $this.removeClass('dragging').removeClass('invisible');

                    //let left = e.target.offsetLeft, top = e.target.offsetTop;
                    let left = e.target.offsetLeft + e.clientX - x, top = e.target.offsetTop + e.clientY - y;
                    $(this).css('left', left)
                })
            },
            calc() {
                //let minTime = new Date(2020, 10, 6), minYear = minTime.getFullYear(), minMonth = minTime.getMonth() + 1, minDay = minTime.getDate();
                //let maxTime = new Date(2020, 12, 1), maxYear = minTime.getFullYear(), maxMonth = minTime.getMonth() + 1, maxDay = minTime.getDate();
                let minTime, maxTime;

                let data = this.data;
                data.map(item => {
                    item.schedules.map(sche => {
                        let upTime = new Date(sche.upTime),
                            expireTime = new Date(sche.expireTime);
                        sche.upTime = upTime;
                        sche.expireTime = expireTime;
                        if (minTime === undefined || minTime > upTime) {
                            minTime = upTime;
                        }
                        if (maxTime === undefined || maxTime < expireTime) {
                            maxTime = expireTime;
                        }
                    })
                });

                let date = {};

                let curTime = minTime, year = curTime.getFullYear(), month = curTime.getMonth() + 1, day = curTime.getDate();
                while (curTime < maxTime) {
                    curTime = new Date(minTime);
                    curTime.setDate(day++);

                    year = curTime.getFullYear();
                    month = curTime.getMonth() + 1;

                    let key = year + '_' + month;
                    if (!date[key]) {
                        date[key] = {
                            key,
                            year,
                            month,
                            range: []
                        }
                    }
                    date[key].range.push(curTime);
                }
                this.date = date;

                this.$nextTick(()=>{
                    setTimeout(()=>{
                        this.renderMark();
                    }, 200)
                });
            },
        }
    };
    const app = new Vue({
        el: "#app",
        components: {grant},
        data: {
            data: [],
        },
        mounted() {
            this.getData();
        },
        methods: {
            select() {
            },
            clear() {
            },
            async getData() {
                let data = await global.apiData.getScheduleAdList();
                this.data = data;
            }
        }
    })

</script>
</body>
</html>